import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const fbView = defineView({
  controller: class FBController {
    checked = false;

    onChange() {
      this.checked = !this.checked;
    }
  },
  controllerAs: "fbCtrl",
  template: /* HTML */ html`
    <div class="btstrap container">
      <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input
            type="email"
            class="form-control"
            id="exampleInputEmail1"
            placeholder="Email"
          />
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input
            type="password"
            class="form-control"
            id="exampleInputPassword1"
            placeholder="Password"
          />
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile" />
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input
              type="checkbox"
              ng-model="fbCtrl.checked"
              ng-input="fbCtrl.onChange()"
            />
            Check me out
          </label>
        </div>
        <button
          type="submit"
          class="btn btn-default"
          ng-class="{disabled: !fbCtrl.checked}"
        >
          Submit
        </button>
      </form>
      <hr />

      输入框
      <div>
        <form class="form-group">
          <div class="">
            <label class="control-label">Email: </label>
            <p class="form-control-static">email@example.com</p>
          </div>
          <div class="">
            <label for="password">密码：</label>
            <input
              type="password"
              class="form-control input-lg"
              id="password"
            />
          </div>
        </form>
      </div>
      文本域
      <div>
        <form class="textarea">
          <textarea cols="100" rows="10"></textarea>
        </form>
      </div>

      <hr />
      <div class="form-group has-success has-feedback">
        <label class="control-label " for="inputSuccess2"
          >Input with success</label
        >
        <input
          type="text"
          class="form-control"
          id="inputSuccess2"
          aria-describedby="inputSuccess2Status"
        />
        <span
          class="glyphicon glyphicon-ok form-control-feedback"
          aria-hidden="true"
        ></span>
        <span id="inputSuccess2Status" class="sr-only">(success)</span>
      </div>
      <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning2"
          >Input with warning</label
        >
        <input
          type="text"
          class="form-control"
          id="inputWarning2"
          aria-describedby="inputWarning2Status"
        />
        <span
          class="glyphicon glyphicon-warning-sign form-control-feedback"
          aria-hidden="true"
        ></span>
        <span id="inputWarning2Status" class="sr-only">(warning)</span>
      </div>
      <div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError2">Input with error</label>
        <input
          type="text"
          class="form-control"
          id="inputError2"
          aria-describedby="inputError2Status"
        />
        <span
          class="glyphicon glyphicon-remove form-control-feedback"
          aria-hidden="true"
        ></span>
        <span id="inputError2Status" class="sr-only">(error)</span>
      </div>
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputGroupSuccess1"
          >Input group with success</label
        >
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input
            type="text"
            class="form-control"
            id="inputGroupSuccess1"
            aria-describedby="inputGroupSuccess1Status"
          />
        </div>
        <span
          class="glyphicon glyphicon-ok form-control-feedback"
          aria-hidden="true"
        ></span>
        <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
      </div>
      <hr />
      <p class="bg-primary">bg-primary</p>
      <p class="bg-success">bg-success</p>
      <p class="bg-info">bg-info</p>
      <p class="bg-warning">bg-warning</p>
      <p class="bg-danger">bg-danger</p>
      <hr />

      <hr />
    </div>
  `,
});

export default fbView;
